iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
0

今天繼續談談關於表單的功能,好的表單設計讓填資料的人眼睛舒服,也讓設計表單的人方便做資料統計。

單選 radio

上一篇有說到type屬性可以決定類型,那麼單選題我們設定為radio,最常見的使用時機大概就是性別欄位吧!
通常我們會在性別的字後面看到兩個圓圈圈,分別在旁邊寫著男和女,你會發現無論你來回點了幾次,他都只會選取你最新一次點的按鈕,也就是我們的單選設定。

<form>
<p>性別 <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女
</p>
</form>

看到這段程式碼你可能會覺得很疑惑,怎麼之前都沒說到type後面的東西呢~
那是為了方便我們加上php的後端連結所寫的,簡單來說一般民眾是不會看到的,只是對於表單的資料收集人員可以使用像是PHP等程式來讀取表單,這裡稍稍做個解釋,name屬性代表的某一類別的選項按鈕(性別的按鈕),value則是那顆按鈕所代表的意思(男/女)。

複選 checkbox

那麼複選題在選項前面出現的都是一個個小方格,是可以讓使用者勾選的。
按照慣例程式碼~

<form>
<p>我的休閒活動 <input type="checkbox" name="activity" value="shopping">逛街<br>
<input type="checkbox" name="activity" value="travel">旅遊<br>
<input type="checkbox" name="activity" value="movie">看電影<br>
</p>
</form>

程式的長相和單選有點像,差別就在於形式的不同,我在每個選項後面也都加上了<br>的標籤,使一行一個選項,更為清楚。那麼就都來試試看吧!
---下一篇會做表單的最後介紹囉!/images/emoticon/emoticon29.gif


上一篇
DAY11-HTML標籤(9) / 表單(上)
下一篇
DAY13-HTML標籤(11) / 表單(下)
系列文
每個人都可以做出理想中的網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言